<template>
  <div class="shop-home-body">
    <!-- header -->
    <!-- banner -->
    <div class="banner-box">
      <mt-swipe :auto="4000">
        <mt-swipe-item>
            <img src="http://running.zhongaiyisheng.net/img/bg1.png" />
        </mt-swipe-item>
        <mt-swipe-item>
            <img src="http://running.zhongaiyisheng.net/img/bg2.png" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 中间专区按钮 -->
    <div class="home-special">
      <ul>
        <li v-for="(item, key) in specialData" :key="key" @click="gotoTypeList(item.id)">
          <div class="img-box">
            <img :src="item.imageUrl" />
          </div>
        </li>
      </ul>
    </div>
    <!-- 热门 -->
    <div class="home-hot">
      <div class="home-hot-title">
        <p class="hot-list-title">热门榜单</p>
        <div class="more-list" @click="gotoTypeList(0)">
          <p>更多</p>
          <i class="more-list-allow-right"></i>
        </div>
      </div>
      <div class="home-hot-list">
        <ul>
          <li v-for="(item, key) in commodityData" :key="key" @click="gotoDetail(item.id)">
            <img :src="item.image" />
            <p>{{ item.name }}</p>
            <span>{{ item.amount }}福豆</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部导航 -->
    <mt-tabbar v-model="selected" :fixed="true">
      <mt-tab-item id="商城">
        <img slot="icon" src="../assets/home.png">
        福豆商城
      </mt-tab-item>
      <mt-tab-item id="我的">
        <img slot="icon" src="../assets/my.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import {Indicator, Toast} from 'mint-ui';
import { Swipe, SwipeItem } from 'mint-ui';
import { Tabbar, TabItem } from 'mint-ui';
import util from "../utils/util";

export default {
  components: {
    Swipe,
    SwipeItem,
    Tabbar,
    TabItem,
  },
  data() {
    return {
      selected: '商城',
      specialData: [
        { id: 1, productTypeName: '图文资讯', imageUrl: require('../assets/home.png') },
      ],
      commodityData: [
      ],
    }
  },
  async created() {
    Indicator.open();
    let data = await util.getFromCache("homeStr", "/ajax/product/center");
    //去掉缓存
    localStorage.removeItem("homeStr");
    this.specialData = data.typeList;
    this.commodityData = data.productList;
    Indicator.close();
  },
  methods: {
    gotoTypeList(id) {
      this.$router.push({
        path: '/type-list',
        query:{id: id}
      });
    },
    gotoDetail(id) {
      this.$router.push({
        path: '/detail',
        query:{id: id}
      });
    },
  },
  watch: {
    selected() {
      if (this.selected === '我的') {
        this.selected = '商城';
        this.$router.push({
          path: '/user',
        });
      }
    }
  },
}

</script>

<style scoped>
  p {
    margin: 0;
    padding: 0;
  }
  .shop-home-body {
    padding: 0 10px;
  }
  /* banner */
  .banner-box {
    width: 100%;
    height: 200px;
  }
  .mint-swipe-item > img {
    width: 100%;
    height: 100%;
  }

  /* 中间专区按钮 */
  .home-special {
    padding: 20px 0;
  }
  .home-special > ul {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }
  .home-special > ul >li {
    width: 25%;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
  }
  .home-special > ul >li >span {
    margin-top: 5px;
  }
  .img-box {
    width: 90%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .img-box > img {
    width: 100%;
    height: 100%;
  }

  /*热门*/
  .home-hot {
    height: 100px;
    background-color: darkcyan;
    position: relative;
    padding: 0 10px;
  }
  .home-hot::after {
    content: '';
    width: 100%;
    height: 20px;
    background: #fff;
    position: absolute;
    bottom: -5px;
    left: 0;
    border-top-left-radius: 200px 20px;
    border-top-right-radius: 200px 20px;
  }
  .home-hot-title {
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
  }
  .hot-list-title {
    font-weight: bold;
  }
  .more-list {
    font-size: 14px;
    display: flex;
    align-items: center;
  }
  .more-list-allow-right {
    border: solid 2px #fff;
    border-bottom-width: 0;
    border-left-width: 0;
    display: block;
    width: 5px;
    height: 5px;
    margin-top: 5px;
    margin-left: 5px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
  }
  .home-hot-list {
    /* height: 100px; */
    margin: 0 auto;
    background-color: #fff;
    border-radius: 5px 5px 0 0;
    position: relative;
    z-index: 9;
    padding: 10px;
    padding-bottom: 60px;
  }
  .home-hot-list > ul {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .home-hot-list > ul >li {
    width: 45%;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    margin-bottom: 15px;
    text-align: left;
  }
  .home-hot-list > ul >li > img {
    display: block;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 0 0.1rem #00000029;
  }
  .home-hot-list > ul >li > p {
    width: 100%;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .home-hot-list > ul >li > span {
    display: block;
    width: 100%;
    color: darkcyan;
  }
  /*底部导航*/
  .mint-tabbar {
    z-index: 99;
  }
</style>
